<template>
    <view class="header">
        <image class="img-title" src="../../../static/icon/back-btn.png" @click="navigateBack" mode="" />
        <view class="title">{{ $t('information.financial.formName') }}</view>
    </view>
    <view class="main">
        <view class="form">
            <view class="realname form-item">
                <input class="realname-input" v-model="form.bankName"
                    :placeholder="$t('information.financial.placeformName')" type="text">
                <text class="label">{{ $t('information.financial.formName') }}</text>
            </view>
            <view class="password form-item">
                <input class="password-input" v-model="form.bankNo"
                    :placeholder="$t('information.financial.placeformAccount')" type="text">
                <text class="label">{{ $t('information.financial.formAccount') }}</text>
            </view>
            <view class="password form-item">
                <input class="password-input" v-model="form.bankAddress"
                    :placeholder="$t('information.financial.placeformBankName')" type="text">
                <text class="label">{{ $t('information.financial.formBankName') }}</text>
            </view>
            <view class="password form-item">
                <input class="password-input" v-model="form.bankImg"
                    :placeholder="$t('information.financial.placeformBankDivi')" type="text">
                <text class="label">{{ $t('information.financial.formBankDivi') }}</text>
            </view>
            <view class="password form-item">
                <input class="password-input" v-model="form.bankPhone"
                    :placeholder="$t('information.financial.placeformBankCode')" type="text">
                <text class="label">{{ $t('information.financial.formBankCode') }}</text>
            </view>
        </view>
        <!-- 退出登录 -->
        <view class="logout" @click="submit()">
            {{ $t('information.financial.submit') }}
        </view>
    </view>
    <!-- 弹窗 -->
    <view class="toast" v-show="isShow">
        <image class="icon-res" :src="isSuccess ? '../../../static/img/right-right.png' : '../../../static/icon/fail-x.png'"
            mode="" />
        <view class="result" v-if="isSuccess">{{ $t('information.financial.success') }}</view>
        <view class="result" v-else>{{ $t('information.financial.fail') }}</view>
        <view class="view-card">
            <view v-if="isSuccess" @click="goBack()">{{ $t('information.financial.show-card') }}</view>
            <view v-else class="text-grey">{{ $t('information.financial.fail-result') }}</view>
            <image v-show="isSuccess" src="../../../static/icon/tangle-right-light.png" mode="" />
        </view>
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { requestApi } from '@/api';



const isShow = ref(false)
const isSuccess = ref(false)
const form = reactive({
    bankName: '',
    bankNo: '',
    bankAddress: '',
    bankImg: '',
    bankPhone: '',
})
const submit = async () => {
    const { status, data } = await requestApi.bankAdd(form)
    if (status == 0) {
        isShow.value = true
    }
    console.log(res);
    // console.log('提交');
}
const goBack = () => {
    isShow.value = false
    return uni.navigateBack({ delta: 1 })
}





// 返回上一层
function navigateBack() {
    let canNavBack = getCurrentPages()
    if (canNavBack && canNavBack.length > 1) {
        uni.navigateBack()
    } else {
        history.back();
    }
}

</script>

<style lang="scss">
page {
    background-color: $uni-bg-color-dark;
}

.header {
    width: 100%;
    height: 88rpx;
  // #ifndef H5
  margin-top: 88rpx;
  // #endif
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
        text-align: center;
        color: #fff;
        margin: 0 auto;
        padding-right: 104rpx;
        font-size: 32rpx;
    }

    .img-title {
        width: 58rpx;
        height: 58rpx;
        margin-left: 46rpx;
    }
}

.main {
    margin: 59rpx 44rpx 0rpx 40rpx;

    .form {

        .form-item {
            background-color: #20212A;
            position: relative;
            margin-bottom: 49rpx;
            height: 90rpx;
            border-radius: 28rpx;

            input {
                height: 100%;
                padding-left: 204rpx;
                color: #c7c7c7;
            }

            .label {
                color: #fff;
                position: absolute;
                top: 50%;
                left: 24rpx;
                transform: translateY(-50%);
            }
        }

        // .realname {}
    }

    .logout {
        background-color: #2D7DFC;
        width: 500rpx;
        height: 96rpx;
        margin: 69rpx auto 73rpx;
        line-height: 96rpx;
        text-align: center;
        border-radius: 204rpx;
        color: #fff;
        letter-spacing: 2rpx;
    }
}

.toast {
    background-color: #292A36;
    width: 304rpx;
    height: 304rpx;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    color: #fff;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .icon-res {
        margin-top: 40rpx;
        width: 101rpx;
        height: 101rpx;
    }

    .result {
        margin-top: 14rpx;
    }

    .view-card {
        display: flex;
        align-items: center;

        view {
            margin-top: 30rpx;
            color: #4A80FF;
        }

        image {
            width: 8rpx;
            margin-top: 30rpx;
            margin-left: 8rpx;
            height: 14rpx;

        }
    }
}

.text-grey {
    color: #c7c7c7 !important;
}
</style>